<!DOCTYPE html>
<p> {{ 'BANDWIDTH' | translate }}:
  <pretty value="ct.util.calculateValue(ct.data.global_upgrades.reaction_bandwidth.power.base,
            ct.data.global_upgrades.reaction_bandwidth.power,
            ct.state.player.global_upgrades_current.reaction_bandwidth)"></pretty> level {{ct.state.player.global_upgrades_current.reaction_bandwidth}}</p>
{{ 'ADJUST_AMOUNT' | translate }}:
<button type="button"
        class="btn btn-default"
        ng-click="ct.util.nextAmount(ct.state.player, 'adjustIndex', ct.adjustAmount)">
  {{ct.adjustAmount[ct.state.player.options.adjustIndex]}}
</button>
<br> {{ 'ADJUST_LEVEL' | translate }}:
<button type="button"
        class="btn btn-default"
        ng-click="ct.adjustLevel(ct.state.player, 'reaction_bandwidth', ct.adjustAmount[ct.state.player.options.adjustIndex])"
        ng-disabled="ct.state.player.global_upgrades_current.reaction_bandwidth === ct.state.player.global_upgrades.reaction_bandwidth">
+{{ct.adjustAmount[ct.state.player.options.adjustIndex]}}
</button>
<button type="button"
        class="btn btn-default"
        ng-click="ct.adjustLevel(ct.state.player, 'reaction_bandwidth', -ct.adjustAmount[ct.state.player.options.adjustIndex])"
        ng-disabled="ct.state.player.global_upgrades_current.reaction_bandwidth === 1">
-{{ct.adjustAmount[ct.state.player.options.adjustIndex]}}
</button>
<div>
  <h2>{{ 'UPGRADE' | translate }}</h2>
  <div class="row">
    <div ng-repeat="key in ct.visibleUpgrades()"
         ng-click="ct.upgradeService.buyGlobalUpgrade(key, ct.state.player)"
         class="col-xs-12 btn btn-default"
         ng-class="{disabled: !ct.upgradeService.canBuyGlobalUpgrade(key, ct.state.player)}">
      <span class="pull-left">
    {{ 'LEVEL' | translate }}: {{ct.state.player.global_upgrades[key]}} {{ct.data.global_upgrades[key].name}}: {{ct.data.global_upgrades[key].description}}
  </span>
      <span class="pull-right"
            ng-repeat="(resource, price) in ct.data.global_upgrades[key].price">
    <pretty value="price*ct.upgradeService.priceMultiplier(key, ct.state.player)"></pretty> &nbsp;
    <get-html value="resource"></get-html>
  </span>
    </div>
  </div>
 Toggle all:
  <input type="checkbox"
         ng-model="ct.state.player.all_reaction_active"
         ng-change="ct.checkAllSlots(ct.state.player)">
  <div ng-repeat="slot in ct.state.player.element_slots track by $index">
    <element-select index="$index"
                    ng-if="!slot"></element-select>
    <div ng-if="slot">
      <h2>{{ct.data.elements[slot.element].name}}</h2>
      <div ng-if="ct.availableReactions(slot, ct.state.player).length > 0">
        <button type="button"
                class="btn btn-default"
                ng-click="ct.addReaction(ct.state.player, slot, ct.reactionSelect[$index])">
    		{{ 'ADD' | translate }}
      <br>
    </button>
        <select name="reactionSelect"
                ng-init="ct.reactionSelect[$index] = ct.availableReactions(slot, ct.state.player)[0]"
                ng-model="ct.reactionSelect[$index]">
      <option ng-repeat="reaction in ct.availableReactions(slot, ct.state.player)"
              value="{{reaction}}">{{reaction}}</option>
    </select> {{ 'SLOTS' | translate }}: {{ct.reactionSize(ct.state.player)}}/{{ct.util.calculateValue(ct.data.global_upgrades.reaction_slots.power.base, ct.data.global_upgrades.reaction_slots.power,
        ct.state.player.global_upgrades.reaction_slots)}}
        <table class="table">
          <tbody>
            <tr class="animif">
              <div class="row">
                <th class="col-xs-10">
                  {{ 'REACTION' | translate }}
                </th>
                <th class="col-xs-1">
                  {{ 'ACTIVE' | translate }}
                  <input type="checkbox"
                         ng-model="slot.active"
                         ng-change="ct.checkAll(slot)">
                </th>
              </div>
            </tr>
            <tr class="animif"
                ng-repeat="reaction in ct.visibleReactions(slot) track by $index">
              <div class="row">
                <td class="col-xs-10">
                  <button type="button"
                          class="btn btn-default"
                          ng-click="ct.removeReaction(slot, reaction)">
                    					{{ 'REMOVE' | translate }}
                    				</button>
                  <span ng-bind-html="ct.util.trustHTML(
                              ct.format.reactionFormat(ct.util.calculateValue(ct.data.global_upgrades.reaction_bandwidth.power.base,
                                          ct.data.global_upgrades.reaction_bandwidth.power,
                                          ct.state.player.global_upgrades_current.reaction_bandwidth),
                                                        reaction.reaction,
                                                        ct.state.player))"></span>
                </td>
                <td class="col-xs-1">
                  <input type="checkbox"
                         ng-model="reaction.active">
                </td>
              </div>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
